
import React, {
    Component,
} from 'react';
import {
    StyleSheet,
    Text,
    View,
    Platform,
    Dimensions,
    TouchableOpacity,
    TextInput,
    Image,
    Modal
} from 'react-native';
import Constant from '../../utils/Constant';

import { getImgUrl } from '../../utils/ComFunction';
import HttpUtils from "../../utils/HttpUtils";
import HttpUrls from "../../utils/HttpUrls";
import AndroidModule from "../../utils/AndroidConnent";

import Loading from "../../utils/Loading";
import { FlatList } from 'react-native';
import moment from 'moment';

const isIos = Platform.OS == 'ios';

const screenW = Dimensions.get('window').width;
let BarHeight = Constant.statusBarHeight;
const screenH = Dimensions.get('window').height;

export default class SelectStaffPop extends Component {

    constructor(props) {
        super(props);
        this.state = {
            staffList: [],
            keyWord:''
        }
    };

    componentDidMount() {
        this.getStaffList();
    }



    closeMsgModal() {
        if (this.props.onClose) {
            this.props.onClose()
        }
    }

    render() {

        return (
            <View style={{
                position: "absolute",
                left: 0,
                top: 0,
                zIndex: 1000,
                backgroundColor: "rgba(0,0,0,0.25)",
                width: screenW,
                height: screenH,
                justifyContent: "center",
                alignItems: "center"
            }}>
                <Modal
                    transparent={true}
                    animationType={'fade'}
                    onRequestClose={() => this.closeMsgModal()}>
                    <View style={styles.container}>
                        <TouchableOpacity
                            style={styles.actContainer}
                            activeOpacity={1}
                            onPress={() => this.closeMsgModal()}>
                        </TouchableOpacity>
                        <View style={styles.framebox}>
                            <View style={styles.titleContainerStyle}>
                                <Text style={styles.titleTextStyle}>请选择员工</Text>

                                <TouchableOpacity
                                    style={styles.closeBtn}
                                    activeOpacity={0.8}
                                    onPress={() => this.closeMsgModal()}>
                                    <Image style={styles.closeImg} source={{ uri: 'icon_close_gray' }}></Image>
                                </TouchableOpacity>
                            </View>

                            <View style={styles.searchContain}>
                                <Image style={styles.searchImg} source={{ uri: 'icon_sc_search' }}></Image>
                                <TextInput
                                    style={styles.searchInput}
                                    placeholder="搜索姓名"
                                    value={this.state.keyWord}
                                    onChangeText={text => this.setState({ keyWord: text })}>

                                </TextInput>

                                <Text style={{ marginHorizontal: 10 }}>|</Text>
                                <TouchableOpacity
                                    onPress={() => this.getFilterStaffList()}>
                                    <Text style={styles.searchBtnText}>搜索</Text>
                                </TouchableOpacity>
                            </View>

                            <View style={{ height: 400, width: '90%' }}>
                                <FlatList
                                    data={this.state.staffList}
                                    renderItem={this.renderOrderItem.bind(this)}
                                    keyExtractor={(item, index) => index + ''}
                                    extraData={this.state}>

                                </FlatList>
                            </View>
                        </View>
                        <Loading onRef={(ref) => (this.Loading = ref)} />
                    </View>
                </Modal>
            </View>

        );
    }

    renderOrderItem({ item, index }) {
        return (
            <View style={styles.itemContain}>
                <Image style={styles.headImg} source={{uri:getImgUrl(item.face)}}></Image>
                <View style={{flex:1,marginLeft:10}}>
                    <View style={{flexDirection:'row',alignItems:'center'}}>
                        <Text style={styles.nameText}>{item.fullname}</Text>
                        <Text style={styles.jobText}>{item.job}</Text>
                    </View>
                    <Text style={styles.phoneText}>{item.userPhone}</Text>
                </View>

                <TouchableOpacity
                    style={styles.sendBtn}
                    onPress={() => this.props.resultCallback(item)}>
                    <Text style={styles.sendBtnText}>选择</Text>
                </TouchableOpacity>
            </View>
        )
    }


    // 关闭弹框
    closeshowbox = () => {
        if (this.props.onClose) {
            this.props.onClose()
        }
    }

    getFilterStaffList(){
        let temp = []
        this.state.staffList.map((item,index)=>{
            if(item.fullname.indexOf(this.state.keyWord)>-1){
                temp.push(item)
            }
        })
        this.setState({
            staffList:temp
        })
    }

    getStaffList() {     

        let params = {
            page:1,
            pageSize:100,
            staffStatus:1,
            merchantId:Constant.merchantId,
            keyWord:this.state.keyWord
        }

        HttpUtils.postRequest(HttpUrls.queryStaffListByCondition, params)
            .then((result) => {
                if(result.data.resultList){
                    this.setState({
                        staffList:result.data.resultList
                    })
                }
            })
            .catch((error) => {

            });
    }

}


const styles = StyleSheet.create({

    container: {
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.5)',
        zIndex: 1000,
    },
    actContainer: {
        flex: 1,
    },
    framebox: {
        position: 'absolute',
        bottom: 0,
        width: '100%',
        backgroundColor: '#f4f4f4',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
    },
    titleContainerStyle: {
        width: '100%',
        height: 60,
        borderTopLeftRadius: 6,
        borderTopRightRadius: 6,
        justifyContent: 'center',
        alignItems: 'center'
    },
    titleTextStyle: {
        fontSize: 16,
        textAlign: 'center',
        color: '#333333',
        fontWeight: 'bold'
    },
    searchContain: {
        flexDirection: 'row',
        alignItems: 'center',
        width: '90%',
        height: 40,
        backgroundColor: '#ffffff',
        borderRadius: 6,
        marginBottom: 12,
        paddingHorizontal: 12
    },
    searchImg: {
        width: 16,
        height: 16,
        marginRight: 12
    },
    searchInput: {
        flex: 1
    },
    searchBtnText: {
        fontSize: 14,
        color: '#333333'
    },
    
    closeImg:{
        width:20,
        height:20
    },
    closeBtn:{
        width:40,
        height:'100%',
        position:'absolute',
        justifyContent:'center',
        alignItems:'center',
        right:10
    },
    itemContain:{
        flexDirection:'row',
        alignItems:'center',
        
        backgroundColor:'#ffffff',
        height:68,
        borderRadius:6,
        padding:12,
        marginBottom:10
    },
    headImg:{
        width:50,
        height:50,
        borderRadius:50
    },
    nameText:{
        fontSize:14,
        color:'#333333',
        fontWeight:'bold'
    },
    jobText:{
        fontSize:12,
        color:'#666666',
        marginLeft:10
    },
    phoneText:{
        fontSize:14,
        color:'#333333',
        marginTop:5
    },
    sendBtn:{
        borderRadius:4,
        borderColor:'#F99802',
        borderWidth:1,
        justifyContent:'center',
        alignItems:'center',
        width:78,
        height:24   
    },
    sendBtnText:{
        fontSize:14,
        color:'#F99802'
    }
});